<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧场景解决方案 - 下载应用</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #3B82F6;
            --secondary-color: #6366F1;
            --accent-color: #F97316;
            --bg-color: #F1F5F9;
            --text-color: #1E293B;
            --light-text-color: #64748B;
            --white: #FFFFFF;
            --card-bg: rgba(255, 255, 255, 0.8);
            --shadow-color: rgba(0, 0, 0, 0.1);
            --border-radius: 24px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
        
        .gradient-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            z-index: -1;
        }
        
        .gradient-bg::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #8B5CF6 100%);
            opacity: 0.1;
        }
        
        .gradient-bg .circle {
            position: absolute;
            border-radius: 50%;
        }
        
        .gradient-bg .circle-1 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0) 70%);
            top: -200px;
            right: -100px;
        }
        
        .gradient-bg .circle-2 {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0) 70%);
            bottom: -250px;
            left: -200px;
        }
        
        header {
            text-align: center;
            margin-bottom: 3rem;
            margin-top: 2rem;
        }
        
        h1 {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: -0.02em;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: var(--light-text-color);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .card {
            background-color: var(--white);
            border-radius: var(--border-radius);
            box-shadow: 0 20px 40px var(--shadow-color);
            width: 100%;
            max-width: 1000px;
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
            position: relative;
        }
        
        .card-content {
            display: flex;
            flex-direction: column;
            padding: 3rem;
        }
        
        @media (min-width: 768px) {
            .card-content {
                flex-direction: row;
                align-items: center;
            }
        }
        
        .app-info {
            flex: 1;
            padding-right: 2rem;
        }
        
        .app-info h2 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-color);
        }
        
        .app-info p {
            margin-bottom: 1.5rem;
            color: var(--light-text-color);
            font-size: 1.05rem;
        }
        
        .features {
            margin: 2rem 0;
        }
        
        .feature {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .feature .icon {
            width: 32px;
            height: 32px;
            background-color: rgba(59, 130, 246, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
        }
        
        .feature .icon svg {
            width: 18px;
            height: 18px;
            fill: var(--primary-color);
        }
        
        .feature-text {
            font-weight: 500;
        }
        
        .download-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
            border-radius: var(--border-radius);
        }
        
        .app-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
        }
        
        .app-icon svg {
            width: 60px;
            height: 60px;
            fill: white;
        }
        
        .download-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem 2rem;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            margin-top: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 10px 15px rgba(99, 102, 241, 0.2);
        }
        
        .download-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 20px rgba(99, 102, 241, 0.3);
        }
        
        .download-btn svg {
            margin-right: 0.5rem;
            width: 20px;
            height: 20px;
        }
        
        .qr-code {
            border: 8px solid white;
            border-radius: 12px;
            width: 160px;
            height: 160px;
            background-color: white;
            margin-bottom: 1.5rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .qr-code img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .download-info {
            text-align: center;
            font-size: 0.9rem;
            color: var(--light-text-color);
            max-width: 250px;
            margin-top: 1rem;
        }
        
        footer {
            margin-top: 4rem;
            text-align: center;
            color: var(--light-text-color);
            font-size: 0.9rem;
            padding: 2rem;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .card-content {
                padding: 1.5rem;
            }
            
            .app-info {
                padding-right: 0;
                margin-bottom: 2rem;
            }
            
            .download-area {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="gradient-bg">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
    </div>
    
    <div class="container">
        <header>
            <h1>智慧场景解决方案</h1>
            <p class="subtitle">全方位打造智慧酒店、智能家居、智慧会议与智慧办公解决方案，提升您的生活与工作体验。</p>
        </header>
        
        <div class="card">
            <div class="card-content">
                <div class="app-info">
                    <h2>立即下载体验</h2>
                    <p>我们的应用提供四大智慧场景解决方案，包括智慧酒店、美好家庭、智慧会议和智慧办公，打造全方位的智能体验。通过我们的应用，您可以轻松管理和控制各种智能设备。</p>
                    
                    <div class="features">
                        <div class="feature">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-.997-4L6.76 11.757l1.414-1.414 2.829 2.829 5.656-5.657 1.415 1.414L11.003 16z"/></svg>
                            </div>
                            <div class="feature-text">强大的设备管理与控制能力</div>
                        </div>
                        <div class="feature">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 19.9a1 1 0 0 1-2 0v-4.4a1 1 0 0 1 2 0v4.4zM12 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9.63 11.29a12 12 0 0 1-19.26 0 1 1 0 0 1 .3-1.38l4.67-3.15v-3.7c0-2.44 1.56-4.67 4.33-5.96a1 1 0 0 1 .93 0c2.77 1.3 4.33 3.52 4.33 5.96v3.7l4.67 3.15a1 1 0 0 1 .3 1.38zm-2.26-.9l-3.67-2.47a1 1 0 0 1-.45-.83v-4.03c0-1.58-0.88-3.16-2.67-4.2a6.99 6.99 0 0 0-5.16 0c-1.8 1.04-2.67 2.62-2.67 4.2v4.03c0 .32-.17.62-.45.83l-3.67 2.47a10 10 0 0 0 17.75 0z"/></svg>
                            </div>
                            <div class="feature-text">智能化场景定制与一键启动</div>
                        </div>
                        <div class="feature">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 17v2H2v-2s0-4 7-4 7 4 7 4m-3.5-9.5A3.5 3.5 0 1 0 9 11a3.5 3.5 0 0 0 3.5-3.5m3.44 5.5A5.32 5.32 0 0 1 18 17v2h4v-2s0-3.63-6.06-4M15 4a3.39 3.39 0 0 0-1.93.59 5 5 0 0 1 0 5.82A3.39 3.39 0 0 0 15 11a3.5 3.5 0 0 0 0-7z"/></svg>
                            </div>
                            <div class="feature-text">多用户协同与统一管理平台</div>
                        </div>
                    </div>
                </div>
                
                <div class="download-area">
                    <div class="app-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17,1H7C4.24,1 2,3.24 2,6V18C2,20.76 4.24,23 7,23H17C19.76,23 22,20.76 22,18V6C22,3.24 19.76,1 17,1M10,4H14C14.55,4 15,4.45 15,5C15,5.55 14.55,6 14,6H10C9.45,6 9,5.55 9,5C9,4.45 9.45,4 10,4M12,21.5C10.62,21.5 9.5,20.38 9.5,19C9.5,17.62 10.62,16.5 12,16.5C13.38,16.5 14.5,17.62 14.5,19C14.5,20.38 13.38,21.5 12,21.5M17,14H7V9H17V14Z"/></svg>
                    </div>
                    
                    <div class="qr-code">
                        <!-- 此处应为实际二维码图片 -->
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="100" height="100"><path d="M3 3H9V9H3V3M5 5V7H7V5H5M11 3H21V9H11V3M13 5V7H19V5H13M3 11H9V21H3V11M5 13V19H7V13H5M11 11H21V21H11V11M13 13V19H19V13H13Z"/></svg>
                    </div>
                    
                    <a href="app-release.apk" class="download-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" fill="#ffffff"/></svg>
                        下载APK安装包
                    </a>
                    
                    <p class="download-info">扫描二维码或点击按钮下载安装包，支持Android 5.0及以上版本</p>
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2023 智慧场景解决方案. 保留所有权利.</p>
    </footer>
</body>
</html> 